CSS: Définition

Nous allons nous découvrir le langage CSS de l'anglais Cascading Style Sheets pour aboutir à la création de pages web mises en forme.

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML pour gérer leur mise en forme.

Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Le langage HTML comme nous l'avons vu sert à implémenter le contenu de façon structuré.
Le CSS lui va permettre de rendre tout cela agréable à lire et à consulter, ce langage va nous permettre de gérer la mise en forme. Les possibilités sont infinies.
Les pièges sont nombreux (trop chargés , illisible en changeant de support, etc..).
Depuis la possibilité de consulter des pages Web depuis des smartphones, il est essentiel que la mise en page d'un site s'adapte à la taille de l'écran : on parle de responsive design.
Des Frameworks CSS tout fait comme Bootstrap permettent l'obtention de sites de bonne qualité relativement facilement.

L'objectif de ce cours est de vous montrer comment les choses s'articulent pour vous permettre de réaliser votre propre site web.

Environnement de travail.

Un premier exemple avec un outil en ligne.

Dans un premier temps nous allons travailler avec un outils en ligne : le site jsfiddle.net Lien ici .

L'objectif de cet exercice est de comprendre les rudiments du CSS.

Pour observer vos modifications, il faudra cliquer sur le bouton run de jsfiddle.

  1. Commencer par collé ce code dans le cadre HTML de jsfiddle.

    <!DOCTYPE html>
<html>
    <head>
        <title> Première page HTML</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Un titre de niveau 2</h2>
        <h3>Un titre de niveau 3</h3>
        <p> Et voilà un premier paragraphe ;)</p>
        <p> Et encore 1</p>
        <h2> Vive la N.S.I.</h2>
        <h3>Les Maths aussi !3</h3>
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem impedit dignissimos dolore qui pariatur nemo quam in, laudantium nulla saepe suscipit voluptas! Excepturi, perferendis dolorum! Ad modi atque eius perspiciatis.</p>
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint odit dolor adipisci id ipsam doloremque non, nesciunt fuga accusantium error itaque? Voluptatibus nam laboriosam, esse ex eum cum porro illo.
        Nesciunt aut, inventore aliquam praesentium natus itaque? Mollitia, nisi magni a dicta unde vel eaque laudantium officia enim explicabo ipsam, quod adipisci blanditiis eius, ratione reprehenderit id asperiores. Nisi, ea.</p>
    </body>
</html>
  2. Coller ce dans le cadre CSS : 
    h2 { 
    text-align: center;
    background-color: red;
    }
h3 {
    font-family: Verdana;
    font-style: italic;
    color: green; 
    }

    3. Vous pouvez retrouver directement le contenu précédent sur Capytale avec le code d157-935590.

  3. Modifier le CSS pour que les titres h2 soient soulignés avec une couleur de fond rose, centrés, et un cadre noir en pointillé.

    Vous pouvez vous aidez de ce site de référence pour y effectuer une recherche. Par exemple, le mot "cadre" peut être lié au mot "border" en anglais.

  4. Modifier le CSS pour que les titres h3 soient écrits en gras, bleus avec un cadre gris et double.

  5. Modifier le CSS pour les paragraphes p soient écrits avec un font family de votre choix et une couleur du texte de votre choix.

Code de déblocage de la correction :

L'environnement de travail sur votre machine.

  1. Dans un premier temps, vous allez créer dans un répertoire de votre ordinateur une arborescence de ce type :

    arborescence pour développer du web

  2. Dans le fichier index.html, collé le contenu HTML de l'exercice 1.

  3. Dans le fichier style.css, collé le contenu CSS de l'exercice 1.

  4. Faire un double clique sur le fichier index.html. Qu'observez vous ?

  5. Dans le < head> de votre index/html écrire la ligne de code suivante :

    <link rel="stylesheet" href="css/style.css" >

    Faire un double clique sur le fichier index.html. Qu'observez vous?

Code de déblocage de la correction :

Tout est prêt pour commencer à styliser votre site et à le compléter.

style.css

Les sélecteurs "simples"

Le CSS va appliquer des attributs de style à du contenu écrit en HTML grâce à des sélecteurs qui vont cibler un contenu particulier pour leur appliquer une propriété particulière de mise en forme.

Nous n’avons vu pour l'instant que des sélecteurs CSS de type élément, c’est-à-dire des sélecteurs qui ciblent un élément en se basant sur le nom de l’élément dans le language HTML.

Les sélecteurs id et class

Les sélecteurs #id et .class permettent de cibler un élément en particulier plutôt qu’un type d’élément.

Il faut "tagué" ("ciblé" en bon français) un élément avec l'un des sélecteurs id et / ou class à l’intérieur de la balise ouvrante de cet élément HTML en lui donnant une valeur.

id permet d'identifier de manière unique un élément particulier d'une page HTML.
class permet d'identifier un ensemble d'éléments dont on veut une même mise en forme dans une page HTML. 

<link p id="p1" >
<link div class="exo" >

Il faut ensuite définir cet élément en CSS en réutilisant cette même valeur. On utilisera : 

#p1 {                    
    font-style: bold;
    color: blue; 
    border-width:2px;
    border-style:double;
    border-color:grey;
}
.exo {
    color:purple;
    font-family: "Lucida Handwriting";
}

Les valeurs indiquées pour les attributs id et class ne doivent contenir ni caractères spéciaux ni espaces et commencer par une lettre.

  1. Écrire ce code dans un fichier html. 

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> Voici mon site</title>
    </head>
    <body>
        <h1>Un titre de niveau 1</h1>
        <p id="p1"> Un paragraphe ne contenant pas grand chose.</p>
        <p class="p1"> encore moins.</p>
        <p> Un troisième aussi vide.</p>
        <p class="p1"> pas mieux.</p>
    </body>
</html>

  2. Écrire ce code dans un fichier css. 

    /* L'élément portant l'id "p1" sera en bleu et en gras */
#p1{
    color:blue;
    font-weight: bold;
}
/* Les éléments portant la classe "p1" seront en rouge et encadrés */
.p1{
    color:red;
    border: 2px outset;
}

  3. Observer l'effet du CSS sur chacun des paragraphes.

Code de déblocage de la correction :

Comme vous pouvez le voir ci-dessus, j’ai attribué un attribut id à mon premier paragraphe et un attribut class au deuxième et quatrième paragraphe.

En effet, pour cibler un élément possédant un attribut id, en CSS, il faudra préciser la valeur de l’attribut précédée d’un dièse #.

Pour cibler un élément possédant un attribut class, en revanche, il faudra en CSS préciser la valeur de l’attribut précédée d’un point .

Ainsi, on peut tout à fait donner la même valeur (ici p1) à un attribut class et id : il n’y a aucun risque de confusion en CSS si vous faites bien attention à bien faire précéder la valeur par le dièse ou le point.

Il existe une différence notable entre les deux attributs class et id : chaque id doit avoir une valeur unique tandis que plusieurs attributs class peuvent posséder la même valeur.

En effet, rappelez vous de nos liens de type ancre. Il s’agit bel et bien du même attribut id qu’on utilise aujourd’hui, avec des finalités différentes.

Il est donc strictement interdit de donner la même valeur à deux id différents dans une même page HTML. En revanche, on peut tout à fait attribuer la même valeur à plusieurs attributs class appartenant à différents éléments HTML.

Cette particularité de l’attribut class va notamment nous permettre d’appliquer le même style à différents (types) d’éléments HTML d’un coup.

Ajouter à votre fichier html de l'exercice précédent un titre de niveau h4 avec une class p1.
Observer.

Code de déblocage de la correction :

L’héritage en CSS

L’héritage est une notion centrale et fondamentale en CSS.

La notion d’héritage signifie que tout élément HTML enfant va hériter, « en cascades », des styles de ses parents.

C’est par ailleurs de là que vient le nom du CSS : Cascading StyleSheets, ou Feuilles de Style en Cascades.

Tous les éléments à l’intérieur de l’élément body sont des enfants de cet élément.
Si l’on applique un style à l’élément body, ses enfants en hériteront automatiquement.

L'objectif du programme n'est pas faire de vous des spécialistes, si vous souhaitez approfondir, on vous renvoie à la sitographie.

Projet suite

Il est temps de poursuivre votre site web.

Elle devra contenir des images, des vidéos, un fichier css commenté avec des class et des id. L'esthétique sera prise en compte.

Sitographie

Licence Creative Commons
Les différents auteurs mettent l'ensemble du site à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

▲